<template>
  <div class="app-container">
    <el-row >
      <el-col :span="4">
        <el-button v-permission="['0030101']" @click="toAdd(null)">添加角色</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <tree-table :data="data" border>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="角色编号">
            <template slot-scope="scope">
              <span>{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button v-permission="['0030101']" type="text" @click="toAdd(scope.row)">添加子角色</el-button>
              <el-button v-permission="['0030104']" type="text" @click="toEditRolePermission(scope.row)">修改权限</el-button>
              <el-button v-permission="['0030102']" type="text" @click="toEdit(scope.row)">修改</el-button>
              <el-button v-permission="['0030103']" v-if="!scope.row.children" type="text" @click="deleteRole(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </tree-table>
      </el-col>
    </el-row>
    <!-- 添加/修改角色 -->
    <el-dialog :visible.sync="saveDialogFormVisible" :close-on-click-modal="false" title="角色" >
      <el-form ref="editForm" :model="form" label-width="180px">
        <input :value="form.id" type="hidden">
        <el-form-item v-show="formOperate==='add'" label="上级角色" prop="pid">
          <el-input v-model="form.pName" autocomplete="off" readonly="readonly"/>
          <input :value="form.pid" type="hidden">
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="角色编码" prop="code">
          <el-input v-model="form.code" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideAddOrEditDialog">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加/修改角色  -->
    <!-- 修改角色权限 -->
    <el-dialog :visible="roleDialogVisible" :close-on-click-modal="false" title="角色权限">
      <el-form ref="rolePermissionEditForm" :model="rolePermissionForm" label-width="180px">
        <input :value="rolePermissionForm.roleId" type="hidden">
        <el-form-item >
          <el-tree
            ref="permissionTree"
            :data="rolePermissionForm.permissionList"
            :props="rolePermissionForm.treeProps"
            :show-checkbox="true"
            :check-strictly="false"
            node-key="id"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideRolePermissionDialog">取 消</el-button>
        <el-button type="primary" @click="saveRolePermission">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改角色权限 -->
  </div>
</template>

<script>

import treeTable from '@/components/TreeTable'
import roleApi from '@/api/sys/role'
import permissionApi from '@/api/sys/permission'
import rolePermissionApi from '@/api/sys/rolePermission'

export default {
  name: 'RoleList',
  components: { treeTable },
  data() {
    return {
      expandAll: false,
      saveDialogFormVisible: false,
      roleDialogVisible: false,
      formOperate: 'add',
      form: {
        name: '',
        code: '',
        pName: '',
        id: '',
        pid: 0
      },
      rolePermissionForm: {
        roleId: 0,
        treeProps: {
          children: 'children',
          label: 'name'
        },
        permissionList: []
      },
      data: []
    }
  },
  mounted() {
    this.search()
    this.permissionList()
  },
  methods: {
    // 重置表单
    resetForm() {
      // if (this.$refs['editForm']) {
      //   this.$refs['editForm'].resetFields()
      // }
      this.form = {
        name: '',
        code: '',
        pName: '',
        id: '',
        pid: 0
      }
    },
    // 转到添加
    toAdd(row) {
      this.showAddOrEditDialog()
      if (row !== undefined && row !== null) {
        var parentNode = row
        this.form.pName = parentNode.name
        this.form.pid = parentNode.id
      } else {
        this.form.pName = ''
        this.form.pid = 0
      }
      this.formOperate = 'add'
    },
    // 转到修改
    toEdit(row) {
      var node = row
      this.showAddOrEditDialog()
      this.form.name = node.name
      this.form.code = node.code
      this.form.id = node.id
      this.formOperate = 'edit'
    },
    // 转到修改角色-菜单权限
    toEditRolePermission(row) {
      this.rolePermissionForm.roleId = row.id
      rolePermissionApi.findByRoleId(row.id).then(response => {
        if (response.data.code === 200) {
          var data = response.data.data
          var selectKeys = []
          for (const item of data) {
            selectKeys.push(item.permissionId)
          }
          this.showRolePermissionDialog()
          this.$nextTick().then(() => {
            this.$refs.permissionTree.setCheckedKeys(selectKeys)
          })
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 显示保存对话框
    showAddOrEditDialog() {
      this.resetForm()
      this.saveDialogFormVisible = true
    },
    // 隐藏保存对话框
    hideAddOrEditDialog() {
      this.saveDialogFormVisible = false
    },
    showRolePermissionDialog() {
      this.roleDialogVisible = true
    },
    hideRolePermissionDialog() {
      this.roleDialogVisible = false
    },
    // 表单保存
    save() {
      if (this.formOperate === 'add') {
        this.add()
      } else if (this.formOperate === 'edit') {
        this.edit()
      }
    },
    // 添加角色
    add() {
      roleApi.addRole(this.form).then(response => {
        if (response.data.code === 200) {
          this.$message.success('添加成功')
          this.hideAddOrEditDialog()
          this.search()
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 修改角色
    edit() {
      roleApi.addRole(this.form).then(response => {
        if (response.data.code === 200) {
          this.$message.success('修改成功')
          this.hideAddOrEditDialog()
          this.search()
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 删除角色
    deleteRole(row) {
      this.$confirm('确定要删除？', '警告').then(() => {
        roleApi.deleteRole(row.id).then(response => {
          if (response.data.code === 200) {
            this.$message.success('删除成功')
            this.search()
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    // 保存角色权限
    saveRolePermission() {
      var checkKeys = this.$refs.permissionTree.getCheckedKeys()
      var rolePermissionList = []
      for (const checkKey of checkKeys) {
        var rolePermission = {}
        rolePermission.roleId = this.rolePermissionForm.roleId
        rolePermission.permissionId = checkKey
        rolePermissionList.push(rolePermission)
      }
      rolePermissionApi.save(this.rolePermissionForm.roleId, rolePermissionList).then(response => {
        if (response.data.code === 200) {
          this.$message.success('保存成功')
          this.hideRolePermissionDialog()
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 列表
    search() {
      roleApi.roleList().then(response => {
        if (response.data.code === 200) {
          this.data = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 获取角色列表
    permissionList() {
      permissionApi.permissionList().then(response => {
        if (response.data.code === 200) {
          this.rolePermissionForm.permissionList = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      })
    }
  }

}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
</style>
